<template>
  <div style="border: 1px solid #ccc" class="relative">
    <div v-if="disabled" class="disable-layer" />
    <Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor style="overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
  </div>
</template>
<script>
// 引入包
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 上传文件的接口
// 引入wangeditor/editor-for-vue的样式
import '@wangeditor/editor/dist/css/style.css'
import { uploadFile } from '@/api'
// 上传文件的路径前缀
export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: Boolean,
    cusHeight: {
      type: String,
      default: '150px'
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      // wangeditor/editor-for-vue的配置
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'underline',
          'italic',
          'through',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'justifyJustify',
          'lineHeight',
          'header1',
          'header2',
          'header3',
          'header4',
          'header5',
          'bulletedList',
          'numberedList',
          'uploadImage',
          'uploadVideo'
        ]
      },
      editorConfig: {
        placeholder: this.$t('message.qsrnr') + '...',
        MENU_CONF: {
          uploadImage: {
            html: this.info,
            server: uploadFile,
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端
            meta: {
              token: '',
              otherKey: '',
              folder: 'COURSE_IMG'
            },
            // 自定义增加 http  header
            headers: {
              token: localStorage.getItem('token') || ''
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            onSuccess(file, res) { // TS 语法
              // onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} ` + this.$t('message.sccg'), res)
            },
            customInsert(res, insertFn) { // TS 语法
              // customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.showUrl)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.showUrl)
            }
          },
          uploadVideo: {
            html: this.info,
            server: uploadFile,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端
            meta: {
              token: '',
              otherKey: '',
              folder: 'COURSE_IMG'
            },
            // 自定义增加 http  header
            headers: {
              token: localStorage.getItem('token') || ''
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            onSuccess(file, res) { // TS 语法
              // onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} ` + this.$t('message.sccg'), res)
            },
            customInsert(res, insertFn) { // TS 语法
              // customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.showUrl)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.showUrl)
            }
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {},
  created() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('this.editor :>> ', this.editor.getAllMenuKeys());
    },
    handleInput(value) {
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="scss" scoped>
.disable-layer {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0.5;
}
</style>
